<template>
  <div class="find-page">
    <user-panel
      :isLogin="isLogin"
      :nickname="nickname"
      :avatar="avatar"
      :handleAvatar="onAvatarClick"
      :handleUser="onUserClick"
    />
    <link-item
      v-for="(v,i) in list"
      :key="i"
      :icon="v.icon"
      :text="v.text"
      :to="v.to"
    />
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { UserPanel, LinkItem } from '@/components'
import helperIcon4 from '@/assets/icons/helper-4.png'
import share from '@/assets/icons/find-share.png'
import about from '@/assets/icons/find-about.png'

const { mapState, mapActions } = createNamespacedHelpers('User')

export default {
  name: 'find-page',
  components: { UserPanel, LinkItem },
  computed: { ...mapState(['isLogin', 'avatar', 'nickname']) },
  data: () => ({
    list: [
      { icon: helperIcon4, text: '我的星座', to: { name: 'cons-choose' } },
      { icon: share, text: '分享给好友', to: '' },
      { icon: about, text: '关于我们', to: '' }
    ]
  }),
  methods: {
    ...mapActions(['getUser']),
    onAvatarClick() {
      !this.isLogin && this.$router.push({ name: 'login-panel' })
    },
    onUserClick() {
      this.$router.push({ name: this.isLogin ? 'user-info' : 'login-panel' })
    }
  },
  mounted() {
    this.isLogin && this.getUser()
  }
}
</script>

<style lang="stylus">
.find-page {
  background-color: #fff;
}
</style>
